<template>
	<main :style="bottomPadding">
		<van-list v-if="shopList&&shopList.length>0"
				  :finished="finished" v-model:loading="loading" v-model:error="error" error-text="请求失败，点击重新加载">
			<template #finished><van-divider>没有更多了</van-divider></template>
			<ShopFavoritesItem v-for="item in shopList" :shop="item" key="item.shopId" :show-mask="operSwitch" @check-change="checkDentity"/>
		</van-list>
		<van-empty v-else image="search" description="您暂无关注的店铺~" />
	</main>
</template>
<style lang="scss" scoped>
</style>
<script lang="ts" setup>
const selectedNum = inject('selectedNum')
const totalNum = inject('totalNum')
const operSwitch = inject('operSwitch',true)
const checkedAll = inject('checkedAll')

const finished=ref(true)
const loading=ref(false)
const error=ref(false)

//computed
const bottomPadding = computed(()=>{
	if(!operSwitch.value){
		return 'padding-bottom:calc(env(safe-area-inset-bottom))!important'
	}else{
		return 'padding-bottom:calc(50px + env(safe-area-inset-bottom))!important'
	}
})

//data
//分布查询关注店铺列表
const shopList = ref(<Array<any>>[])
shopList.value = [
	{
		shopId: 'ZBCU4321',  //string '店铺id',
		shopShortName: '大沃尔科技全国连锁旗舰店',  //string '店铺简称',
		logoPath: 'https://cbu01.alicdn.com/img/ibank/O1CN017oL5fb1Bs2q98efJU_!!0-0-cib.jpg',  //string '店铺logo',
		shopType: '',  //string 店铺类型,
		shopCat: '手机 | 智能终端 | 行业模组 | 3C配件 | 权益 | 电商百货', //string 主营范围，为商品分类若干一级节点编号，逗号隔开的字串
		offlineSupported: '1', //string 是否支持线下支付0否 1支持
		hotShowSupported: '1', //string 是否热门店铺 0否 1支持
		cloubSupplier: '0', //string 是否优品小店供货商 0否 1是
		allowBackDay: 7,  //number允许退货天数
		createTime: '2018-01-21', //string 开店时间
		offers: [
			{
				gdsId: '商品id',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01cMmiAS1gRFf71suul_!!2211261674138-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
			{
				gdsId: '商品id',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01nY2rAg1gRFhjZb7JE_!!2211261674138-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
			{
				gdsId: '商品id',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01dijmTp27YZbRRRIXV_!!2211851637809-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
			{
				gdsId: '商品id',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01gSau2e1Mr5h96OI0r_!!2361561487-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
			{
				gdsId: '商品id',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01zFXpY01FbnCiGKtVM_!!2207691150506-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
		],
	},
	{
		shopId: 'ZBCU4643',  //string '店铺id',
		shopShortName: '大沃尔科技全国连锁旗舰店',  //string '店铺简称',
		logoPath: 'https://cbu01.alicdn.com/img/ibank/O1CN017oL5fb1Bs2q98efJU_!!0-0-cib.jpg',  //string '店铺logo',
		shopType: '',  //string 店铺类型,
		shopCat: '手机 | 智能终端 | 行业模组 | 3C配件 | 权益 | 电商百货', //string 主营范围，为商品分类若干一级节点编号，逗号隔开的字串
		offlineSupported: '1', //string 是否支持线下支付0否 1支持
		hotShowSupported: '1', //string 是否热门店铺 0否 1支持
		cloubSupplier: '0', //string 是否优品小店供货商 0否 1是
		allowBackDay: 7,  //number允许退货天数
		createTime: '2018-01-21', //string 开店时间
		offers: [
			{
				gdsId: '商品id',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01cMmiAS1gRFf71suul_!!2211261674138-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
			{
				gdsId: '商品id',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01nY2rAg1gRFhjZb7JE_!!2211261674138-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
			{
				gdsId: '商品id',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01dijmTp27YZbRRRIXV_!!2211851637809-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
			{
				gdsId: '商品id',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01gSau2e1Mr5h96OI0r_!!2361561487-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
			{
				gdsId: '商品id',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01zFXpY01FbnCiGKtVM_!!2207691150506-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
		],
	},
	{
		shopId: 'ZBCU4121',  //string '店铺id',
		shopShortName: '大沃尔科技全国连锁旗舰店',  //string '店铺简称',
		logoPath: 'https://cbu01.alicdn.com/img/ibank/O1CN017oL5fb1Bs2q98efJU_!!0-0-cib.jpg',  //string '店铺logo',
		shopType: '',  //string 店铺类型,
		shopCat: '手机 | 智能终端 | 行业模组 | 3C配件 | 权益 | 电商百货', //string 主营范围，为商品分类若干一级节点编号，逗号隔开的字串
		offlineSupported: '0', //string 是否支持线下支付0否 1支持
		hotShowSupported: '1', //string 是否热门店铺 0否 1支持
		cloubSupplier: '1', //string 是否优品小店供货商 0否 1是
		allowBackDay: 7,  //number允许退货天数
		createTime: '2018-01-21', //string 开店时间
		offers: [
			{
				gdsId: '商品id',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01CUphvP1n8CZOgqtOL_!!4275715044-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
		],
	},
	{
		shopId: 'ZBCU4821',  //string '店铺id',
		shopShortName: '大沃尔科技全国连锁旗舰店',  //string '店铺简称',
		logoPath: 'https://cbu01.alicdn.com/img/ibank/O1CN017oL5fb1Bs2q98efJU_!!0-0-cib.jpg',  //string '店铺logo',
		shopType: '',  //string 店铺类型,
		shopCat: '手机 | 智能终端 | 行业模组 | 3C配件 | 权益 | 电商百货', //string 主营范围，为商品分类若干一级节点编号，逗号隔开的字串
		offlineSupported: '0', //string 是否支持线下支付0否 1支持
		hotShowSupported: '0', //string 是否热门店铺 0否 1支持
		cloubSupplier: '1', //string 是否优品小店供货商 0否 1是
		allowBackDay: 7,  //number允许退货天数
		createTime: '2018-01-21', //string 开店时间
		offers: [
			{
				gdsId: '商品id',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01iWVdG41orpf3jDEsR_!!2215619905279-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
		],
	},
]

//先假设已经读取了后台数据，返回了totalNum (后面要改的)
totalNum.value=shopList.value.length

//method
const checkDentity=()=>{
	let allCheck=true,selNum=0
	for(let tmp of shopList.value){
		if(!tmp.checked){
			allCheck=false
		}else{
			++selNum
		}
	}
	selectedNum.value=selNum
	checkedAll.value=allCheck
}

const toggleAll=(val:boolean)=>{
	let selNum=0
	for(let tmp of shopList.value){
		tmp.checked=val
		if(tmp.checked)	++selNum
	}
	selectedNum.value=selNum
	checkedAll.value=val
}
const deleteBatch=()=>{
	let len = 0, delList:string[]=[]
	for(let item of shopList.value){
		if(item.checked){
			++len
			delList.push(item.shopId


			)
		}
	}
	console.log(delList)
	return delList
}
defineExpose({
	toggleAll, deleteBatch,
})
</script>